<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jcarousellite_1.0.1.min.js"></script>
</head>

<body>
<div id="demo" class="cEnd tabs-container">  
    <h2>Default Configuration</h2>
<div class="carousel default">
    <button class="prev">&lt;&lt;</button>
    <div style="visibility: visible; overflow: hidden; position: relative; z-index: 2; left: 0px; width: 510px;" class="jCarouselLite">
        <ul style="margin: 0px; padding: 0px; position: relative; list-style-type: none; z-index: 1; width: 2890px; left: -510px;">
         <li style="overflow: hidden; float: left; width: 170px; height: 145px;"><img src="imagesp/anhdlich.jpg" width="970" height="455"></li>
            <li style="overflow: hidden; float: left; width: 170px; height: 145px;"><img src="imagesp/dulich_duyet.png" width="476" height="237"></li>
           <li style="overflow: hidden; float: left; width: 170px; height: 145px;"><img src="imagesp/anhdlich.jpg" width="970" height="455"></li>
            <li style="overflow: hidden; float: left; width: 170px; height: 145px;"><img src="imagesp/dulich_duyet.png" width="476" height="237"></li>
           <li style="overflow: hidden; float: left; width: 170px; height: 145px;"><img src="imagesp/anhdlich.jpg" width="970" height="455"></li>
            <li style="overflow: hidden; float: left; width: 170px; height: 145px;"><img src="imagesp/dulich_duyet.png" width="476" height="237"></li>
            <li style="overflow: hidden; float: left; width: 170px; height: 145px;"><img src="imagesp/anhdlich.jpg" width="970" height="455"></li>
            <li style="overflow: hidden; float: left; width: 170px; height: 145px;"><img src="imagesp/dulich_duyet.png" width="476" height="237"></li>
            <li style="overflow: hidden; float: left; width: 170px; height: 145px;"><img src="imagesp/anhdlich.jpg" width="970" height="455"></li>
            <li style="overflow: hidden; float: left; width: 170px; height: 145px;"><img src="imagesp/dulich_duyet.png" width="476" height="237"></li>
            <li style="overflow: hidden; float: left; width: 170px; height: 145px;"><img src="imagesp/anhdlich.jpg" width="970" height="455"></li>
            <li style="overflow: hidden; float: left; width: 170px; height: 145px;"><img src="imagesp/dulich_duyet.png" width="476" height="237"></li>
            <li style="overflow: hidden; float: left; width: 170px; height: 145px;"><img src="imagesp/anhdlich.jpg" width="970" height="455"></li>
            <li style="overflow: hidden; float: left; width: 170px; height: 145px;"><img src="imagesp/dulich_duyet.png" width="476" height="237"></li>
            </ul>
    </div>
    <button class="next">&gt;&gt;</button>
    <div class="clear"></div>   
</div>

<p>
    This is the default configuration. The carousel is created with the "next" and "prev" navigation buttons.
    You don't have to specify anything else unless you want to bend it to your will.
</p> 
   
<pre><script type="text/javascript">$(".default .jCarouselLite").jCarouselLite({
    btnNext: ".default .next",
    btnPrev: ".default .prev"
	
});
</script> 
</pre>

<script type="text/javascript">
    $(".default .jCarouselLite").jCarouselLite({
        btnNext: ".default .next",
        btnPrev: ".default .prev"
    });   
</script>     
</div>
</body>
</html>
